extends layout/main-layout

block active-item
  - menu['Elements']['active'] = 1
  - menu['Elements']['S']['Notifications']['active'] = 1


block content
  
  h3 Notifications
    br
    small A complete set of notification posibilities
  // START row
  .row
    .col-lg-6
      // START panel
      .panel.panel-default
        .panel-heading
          | Notify Alerts
        .panel-body
          p Create toggleable notifications that fade out automatically.
          p
            button.btn.btn-default(type="button", data-toggle="notify", data-message="Message ..") Message
          p You can use HTML inside your notification message          
          p
            button.btn.btn-default(type="button", data-toggle="notify", data-message="<em class='fa fa-check'></em> Message with icon..") Message with Icon
      // END panel
    .col-lg-6
      // START panel
      .panel.panel-default
        .panel-heading
          | Notify with Status
        .panel-body
          p Uses builtin alert status to apply notifications
          p
            button.btn.btn-danger(type="button", data-toggle="notify", data-message="Message with status.." data-options='{"status":"danger"}') Danger
            button.btn.btn-info(type="button", data-toggle="notify", data-message="Message with status.." data-options='{"status":"info"}') Info
            button.btn.btn-warning(type="button", data-toggle="notify", data-message="Message with status.." data-options='{"status":"warning"}') Warning
            button.btn.btn-success(type="button", data-toggle="notify", data-message="Message with status.." data-options='{"status":"success"}') Success
          p Show in different positions
          p
            button.btn.btn-default(type="button", data-toggle="notify", data-message="Message in position.." data-options='{"pos":"bottom-center"}') Bottom Cener
            button.btn.btn-default(type="button", data-toggle="notify", data-message="Message in position.." data-options='{"pos":"top-left"}') Top Left
            button.btn.btn-default(type="button", data-toggle="notify", data-message="Message in position.." data-options='{"pos":"top-right"}') Top Right
            button.btn.btn-default(type="button", data-toggle="notify", data-message="Message in position.." data-options='{"status":"success", "pos":"bottom-right"}') Succes at Bottom Right
      // END panel
  // END row
  // START row
  .row
    .col-lg-6
      // START panel
      .panel.panel-default
        .panel-heading
          | Alert Styles
        .panel-body
          .alert.alert-success
            | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
            a.alert-link(href='#') Alert Link
            | .
          .alert.alert-info
            | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
            a.alert-link(href='#') Alert Link
            | .
          .alert.alert-warning
            | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
            a.alert-link(href='#') Alert Link
            | .
          .alert.alert-danger
            | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
            a.alert-link(href='#') Alert Link
            | .
        //
           .panel-body 
      // END panel
    .col-lg-6
      // START panel
      .panel.panel-default
        .panel-heading
          | Dismissable Alerts
        .panel-body
          .alert.alert-success.alert-dismissable
            button.close(type='button', data-dismiss='alert', aria-hidden='true') ×
            | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
            a.alert-link(href='#') Alert Link
            | .
          .alert.alert-info.alert-dismissable
            button.close(type='button', data-dismiss='alert', aria-hidden='true') ×
            | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
            a.alert-link(href='#') Alert Link
            | .
          .alert.alert-warning.alert-dismissable
            button.close(type='button', data-dismiss='alert', aria-hidden='true') ×
            | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
            a.alert-link(href='#') Alert Link
            | .
          .alert.alert-danger.alert-dismissable
            button.close(type='button', data-dismiss='alert', aria-hidden='true') ×
            | Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
            a.alert-link(href='#') Alert Link
            | .
        //
           .panel-body 
      // END panel
  // END row
  // START row
  .row
    .col-lg-6
      // START panel
      .panel.panel-default
        .panel-heading
          | Modals
        .panel-body
          // Button trigger modal 
          button.btn.btn-primary.btn-lg(data-toggle='modal', data-target='#myModal')
            | Launch Demo Modal
      // END panel
    .col-lg-6
      // START panel
      .panel.panel-default
        .panel-heading
          | Tooltips and Popovers
        .panel-body
          h4 Tooltip Demo
          .tooltip-demo
            button.btn.btn-default(type='button', data-toggle='tooltip', data-placement='left', title='', data-original-title='Tooltip on left') Tooltip on left
            button.btn.btn-default(type='button', data-toggle='tooltip', data-placement='top', title='', data-original-title='Tooltip on top') Tooltip on top
            button.btn.btn-default(type='button', data-toggle='tooltip', data-placement='bottom', title='', data-original-title='Tooltip on bottom') Tooltip on bottom
            button.btn.btn-default(type='button', data-toggle='tooltip', data-placement='right', title='Tooltip on right') Tooltip on right
          br
          h4 Clickable Popover Demo
          .tooltip-demo
            button.btn.btn-default(type='button', data-container='body', data-toggle='popover', data-placement='left', data-content='Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', data-original-title='', title='')
              | Popover on left
            button.btn.btn-default(type='button', data-container='body', data-toggle='popover', data-placement='top', data-content='Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', data-original-title='', title='')
              | Popover on top
            button.btn.btn-default(type='button', data-container='body', data-toggle='popover', data-placement='bottom', data-content='Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', data-original-title='', title='')
              | Popover on bottom
            button.btn.btn-default(type='button', data-container='body', data-toggle='popover', data-placement='right', data-content='Vivamus sagittis lacus vel augue laoreet rutrum faucibus.', data-original-title='', title='')
              | Popover on right
        //
           .panel-body 
      // END panel
  // END row


block body_child
  // START modal
  #myModal.modal.fade(tabindex='-1', role='dialog', aria-labelledby='myModalLabel', aria-hidden='true')
    .modal-dialog
      .modal-content
        .modal-header
          button.close(type='button', data-dismiss='modal', aria-hidden='true') ×
          h4#myModalLabel.modal-title Modal title
        .modal-body
          | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        .modal-footer
          button.btn.btn-default(type='button', data-dismiss='modal') Close
          button.btn.btn-primary(type='button') Save changes
  // END modal